<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<title>系统资源</title>
<body>
	<div data-options="region:'west',title:'菜单列表',split:true,border:false" style="width: 320px; padding: 10px;">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" onclick="addRootMenu(); return false;">添加根节点</a>
		<table id="sysResTree"></table>
	</div>
	<div data-options="region:'center',title:'菜单信息',border:false">
		<div id="cont_tip" style="padding: 10px;">
			<h3>☜点击菜单查看信息</h3>
		</div>
		<div id="resInfo" style="display: none;">
			<div class="res-item">
				<fieldset>
					<legend>基础信息</legend>
					<form id="sysForm" method="post">
						<input name="parentId" type="hidden">
						<table class="table">
							<tbody>
								<tr>
									<th>菜单名称:</th>
									<td><input name="resName" type="text" class="easyui-validatebox" required="true"></td>
								</tr>
								<tr>
									<th>url:</th>
									<td><input name="url" type="text" class="easyui-validatebox" style="width: 300px;"></td>
								</tr>
								<tr>
									<th>操作</th>
									<td><a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveRes(); return false;">保存</a></td>
								</tr>
							</tbody>
						</table>
					</form>
				</fieldset>
			</div>
			<div class="res-item">
				<fieldset>
					<legend>设置操作点</legend>
					<div id="setOptDiv" style="height: 400px;">
						<div data-options="region:'center'" style="padding: 10px;">
							<div id="toolbar">
								<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addOpt()">添加操作点</a>
							</div>
							<table id="dg"></table>
						</div>
						<div data-options="region:'east',split:true,collapsed:true,title:'操作点列表'" style="width: 50%;">
							<div style="padding: 5px; background-color: #fafafa; margin-bottom: 10px;" data-options="iconCls:'icon-search'">
								<form id="optAddfm">
									<table>
										<tr>
											<td>操作代码:</td>
											<td><input id="operateCodeSch" type="text" class="easyui-validatebox"></td>
											<td>操作名称:</td>
											<td><input id="operateNameSch" type="text" class="easyui-validatebox"></td>
											<td><a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="searchOpt(); return false;">查询</a></td>
										</tr>
									</table>
								</form>
							</div>
							<div id="optAddGrid"></div>
						</div>
					</div>
				</fieldset>
			</div>
		</div>
	</div>

	<div id="addRootDl" class="easyui-dialog" style="width: 480px; height: 180px; " closed="true" modal="true" buttons="#addRootDldlg-buttons">
		<form id="addRootfm" method="post">
			<input id="parentId" name="parentId" type="hidden">
			<table class="table">
				<tbody>
					<tr>
						<th>菜单名称:</th>
						<td><input name="resName" type="text" class="easyui-validatebox" required="true"></td>
					</tr>
					<tr>
						<th>url:</th>
						<td><input name="url" type="text" class="easyui-validatebox" style="width: 300px;"></td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	<div id="addRootDldlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveRootMenu(); return false;">保存</a> <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$addRootDl.dialog('close'); return false;">取消</a>
	</div>
	
	<script type="text/javascript">
		var that = this;
		var selectedNode;
		var $contTip = $('#cont_tip');
		var $resInfo = $('#resInfo');
		var $addRootDl = $('#addRootDl');
		var $sysForm = $('#sysForm');
		var $addRootfm = $('#addRootfm');
		var $setOptDiv = $('#setOptDiv');
		var layoutInit = false;

		var $sysResTree = $("#sysResTree");
		$sysResTree.tree({
			url : ctx + 'listAllMenu.do',
			onClick : function(node) {
				selectedNode = node;
				var attr = node.attributes;

				$sysForm.form('load', {
					parentId : node.parentId,
					resName : node.resName,
					url : attr.url
				});

				$contTip.hide();
				$resInfo.show();

				reloadOptCode();
				initOptAddGird();
				initLayout();
			},
			formatter : function(node) {
				var text = node.text;
				text += buildTreeButton(node);
				return text;
			},
			loadFilter : function(menus, parent) {
				for (var i = 0, len = menus.length; i < len; i++) {
					formatMenu(menus[i]);
				}
				return menus;
			}
		});

		function buildTreeButton(node) {
			var html = [];
			html.push(' <a href="#" onclick="' + FunUtil.createFun(window, 'addChildNode', node) + ' return false;">[添加子节点]</a> ');
			if (node.children.length == 0) {
				html.push(' <a href="#" onclick="' + FunUtil.createFun(window, 'delSysRes', node) + ' return false;">[删除节点]</a> ');
			}
			return html.join('');
		}

		function initLayout() {
			if (!layoutInit) {
				layoutInit = true;
				$setOptDiv.layout();
			}
		}

		function formatMenu(data) {
			if (data) {
				data.attributes = {
					url : data.url,
					srId : data.srId
				}
			}
			var children = data.children;
			if (children && children.length > 0) {
				data.isParent = true;
				for (var i = 0, len = children.length; i < len; i++) {
					formatMenu(children[i]);
				}
			}
		}

		function saveRes() {
			var srId = selectedNode ? selectedNode.srId : '';
			var url = ctx + 'updateRSysRes.do?srId=' + srId;
			$sysForm.form('submit', {
				url : url,
				onSubmit : function() {
					return $(this).form('validate');
				},
				success : function(resultTxt) {
					var result = $.parseJSON(resultTxt);
					Action.execResult(result, function(result) {
						MsgUtil.topMsg('修改成功');
						$sysResTree.tree('reload'); // reload the user data
					});
				}
			});
		}

		function delSysRes(node) {
			var self = this;
			if (node) {
				var msg = '确定要删除<strong>' + node.resName + '</strong>吗?';
				$.messager.confirm('Confirm', msg, function(r) {
					if (r) {
						Action.post(ctx + 'delRSysRes.do', {
							srId : node.srId
						}, function(result) {
							Action.execResult(result, function(result) {
								MsgUtil.topMsg('删除成功');
								$sysResTree.tree('reload'); // reload the user data
								reset();
							});
						});
					}
				});
			}
		}

		function reset() {
			selectedNode = null;
			$resInfo.hide();
			$contTip.show();
		}

		function addRootMenu() {
			$('#parentId').val(0);
			this.$addRootDl.dialog('open').dialog('setTitle', '添加根节点');
			this.$addRootfm.form('reset');
		}

		function addChildNode(node) {
			$('#parentId').val(node.srId);
			this.$addRootDl.dialog('open').dialog('setTitle', '添加子节点');
			this.$addRootfm.form('reset');
		}

		function saveRootMenu() {
			var url = ctx + 'addRSysRes.do';
			$addRootfm.form('submit', {
				url : url,
				onSubmit : function() {
					return $(this).form('validate');
				},
				success : function(resultTxt) {
					var result = $.parseJSON(resultTxt);
					Action.execResult(result, function(result) {
						MsgUtil.topMsg('添加成功');
						this.$addRootDl.dialog('close');
						$sysResTree.tree('reload'); // reload the user data
					});
				}
			});
		}

		// --------------设置操作点--------------

		var crudOpt = Crud.create({
			pk : 'sfId',
			addUrl : ctx + 'addRSysFunction.do',
			delUrl : ctx + 'delRSysFunction.do',
			gridId : 'dg'
		});

		var buttons = [ {
			text : '删除',
			onclick : delPermission
		} ];

		var $dg = crudOpt.buildGrid([ {
			field : 'operateCode',
			title : '操作代码'
		}, {
			field : 'operateName',
			title : '操作名称'
		}, crudOpt.createOperColumn(buttons) ], {
			pageSize : 10
		});

		function reloadOptCode() {
			if (selectedNode) {
				$dg.datagrid({
					url : ctx + 'listRSysFunction.do?srIdSch=' + selectedNode.srId
				})
			}
		}

		function addOpt() {
			$setOptDiv.layout('expand', 'east');
		}

		function delPermission(row) {
			crudOpt.del(row);
		}

		var crudOptAdd = Crud.create({
			pk : 'operateCode',
			dlgId : 'optAdddlg',
			formId : 'optAddfm',
			gridId : 'optAddGrid',
			searchFormId : 'optAddSchForm'
		});

		var buttons = [ {
			text : '添加',
			onclick : function(row) {
				Action.post(ctx + 'addRSysFunction.do?srId=' + selectedNode.srId, row, function(data) {
					Action.execResult(data, function() {
						$dg.datagrid('reload');
					});
				})
			}
		} ];

		var $optAddGrid = crudOptAdd.buildGrid([ {
			field : 'operateCode',
			title : '操作代码'
		}, {
			field : 'operateName',
			title : '操作名称'
		}, crudOptAdd.createOperColumn(buttons) ], {
			rownumbers : true,
			pageSize : 10,
			toolbar : ''
		});

		function searchOpt() {
			var data = {
				operateCodeSch : $.trim($('#operateCodeSch').val()),
				operateNameSch : $.trim($('#operateNameSch').val())
			};
			$optAddGrid.datagrid('reload', data);
		}

		function initOptAddGird() {
			if (!this.optAddInit) {
				this.optAddInit = true;
				$optAddGrid.datagrid({
					url : ctx + 'listRSysOperate.do'
				});
			}
		}
	</script>
</body>